@charset "utf-8";
@import "keyboards.less";
@import "iconfonts.css";

/*variable 变量*/
@black87: rgba(0,0,0,.87);
@black54: rgba(0,0,0,.54);
@black26: rgba(0,0,0,.26);
@black10: rgba(0,0,0,.1);
@white87: rgba(255,255,255,.87);
@white54: rgba(255,255,255,.54);
@white26: rgba(255,255,255,.26);
@white10: rgba(255,255,255,.1);
@theme-deep-color: #242423;
@theme-light-color: #1774ff;
@border-color: #5a5a5a;
@bg-color: #b6f7be;

/*reset style*/
html {
	font-size: 16px;
}

html, body {
	position: relative;
	margin: 0;
	padding: 0;	
	width: 100%;
	height: 100%;
	background-color: #a9ecb1;
	color: @black87;
	overflow: hidden;
}

body,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
ul, ol, dl, li, dt, dd,
table, tr, th, td,
article, section, header, aside, nav, footer, div, p,
a, span, em, i, strong, label {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: helvetica, "Microsoft YaHei", sans-serif;	
	-webkit-font-smoothing: antialiased;
	font-size: .875rem;
}

ul, ol, li {
	list-style: none;
}

a {
	text-decoration: none;
	color: @black87;
	&:hover {
		color: @theme-light-color;
	}
}

button, input, select, textarea,
input:focus, select:focus, textarea:focus {
	outline: none;
}

input[type="text"] {
	.u;
	padding: 0 .5rem;
}

/*global*/
.table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	caption {
		.u(2rem);
		font-size: .9375rem;
		text-align: left;
	}
	tr {
		height: 2rem;
	}
	th {
		font-weight: normal;
	}
	th, td {
		text-align: center;
		.border;
	}
}
.radius(@radius: 2px) {
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.border {
  border: 1px solid @border-color;
}

.u(@length: 2rem) {
  height: @length;
  line-height: @length;
}

.q(@length: 2rem) {
  height: @length;
  width: @length;
  line-height: @length;
  text-align: center;
}

/*滚动条样式*/
::-webkit-scrollbar {
	width: .5rem;
	height: .5rem;
}
::-webkit-scrollbar-thumb {
	background-color: #deffe2;
	box-shadow: 0 0 0 1px #adeab4 inset;
}
::-webkit-scrollbar-track {
	background-color: #adeab4;
}
::-webkit-scrollbar-button {
	width: .5rem;
	height: .5rem;
	background-color: #adeab4;
	background-repeat: no-repeat;
	background-size: 400% 100%;
	background-image: url("../images/arrow.png")
}
::-webkit-scrollbar-button:horizontal:start{
	background-position: 0 0;
}
::-webkit-scrollbar-button:horizontal:end{
	background-position: -.5rem 0;
}
::-webkit-scrollbar-button:vertical:start{
	background-position: -15px 0;
}
::-webkit-scrollbar-button:vertical:end{
	background-position: -23px 0;
}
/*page style 页面框架*/
article {
	position: relative;
	width: 1440px;
	height: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	& > header {
		height: 2.5rem;
		background-color: #3d404c;
		display: flex;
		justify-content: space-between;
		color: @white87;
		h1 {
			margin-left: 2rem;
			.u(2.5rem);
			font-size: 1.25rem;
			font-weight: normal;
		}
	}
	& > section {
		position: relative;
		flex: 1;
		display: flex;
	}
}

/*头部功能按钮组*/
.btn-group {
	display: flex;
	align-items: center;
	& > .btn {
		position: relative;
		.u(2.5rem);
		padding: 0 1rem;
		font-size: 18px;
		text-align: center;
		cursor: pointer;
		transition: all .2s;
		&:before {
			position: absolute;
			top: .5rem;
			left: 0;
			bottom: .5rem;
			content: '';
			box-sizing: border-box;
			border-left: 1px solid #e0e0e0;
		}
		&:hover {
			background-color: rgba(255,255,255,.2);
		}
		&:active {
			background-color: #3d404c;
		}
		&.btn-drop-down {
			position: relative;
			padding-right: 2.5rem;
			&:after {
				position: absolute;
				top: 50%;
				right: .75rem;
				margin-top: -.5rem;
				content: "\e900";
				.q(1rem);
				font-size: 1rem;
				font-family: "icomoon";
				transition: all .2s;
			}
			& > span {
				font-size: 18px;
			}
			& > ul {
				position: absolute;
				top: 100%;
				left: 0;
				z-index: 3;
				display: none;
				min-width: 100%;
				background-color: #fff;
				border: 1px solid #e0e0e0;
				box-shadow: 0 0 8px rgba(255,255,255,.54);
				& > li {
					.u(1.75rem);
					min-width: 100%;
					padding: 0 1rem;
					text-align: left;
					font-size: 18px;
					white-space: nowrap;
					border-bottom: 1px solid #e0e0e0;
					transition: all .2s;
					&:last-child {
						border-bottom: none;
					}
					&:hover, &.active {
						background-color: #1d2a3a;
						color: @white87;
					}
				}
			}
			&.on {
				&:after {
					transform: rotate(-180deg);
				}
				& > ul {
					display: block;
				}
			}
		}
	}
	& > .btn-connect.active {
		background-color: @theme-light-color;
		color: @white87;
		&:before {
			display: none;
		}
	}
	& > .btn-cross.active {
		background-color: #ff8a00;
		color: @white87;
		&:before {
			display: none;
		}
	}
}

/*左边tray盘*/
.aside {
	display: flex;
	width: 25rem;
	height: 100%;
	background-color: @bg-color;
	padding: 1rem;
	& > div {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		&:first-child {
			margin-right: 1rem;
		}
	}
	ul {
		height: 16.25rem;
		width: 11rem;
		li {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			.u(.875rem);
			padding: 0 .25rem;
			border: 1px solid @border-color;
			cursor: pointer;
			& + li {
				margin-top: -1px;
			}
			&.active, &:active {
				border: 1px solid #ff8a00;
				z-index: 1;
			}
			& > * + * {
				margin-left: .25rem;
			}
			span {
				display: block;
				.u(.75rem);
				font-size: .6875rem;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				&.language {
					width: 36px;
				}
				&.color {
					width: 44px;
					text-align: center;
				}
				&.remain-number {
					width: 22px;
					text-align: right;
				}
			}
		}
	}
	.progress {
		position: relative;
		flex: 1;
		background-color: #7c8688;
		height: 4px;
		border-radius: 2px;
		border: none;
		overflow-x: hidden;
		padding: 1px 0;
		background-clip: content-box;
		.value {
			position: absolute;
			color: @theme-light-color;
			background: currentcolor;
			height: 2px;
			border-radius: 1px;
			-webkit-transition: 1s;
			transition: 1s;
			&:after {
				content: '';
				position: absolute;
				width: 4px;
				height: 4px;
				border-radius: 50%;
				background: currentcolor;
				top:-1px;
				right: 0;
			}
		}
	}
	.progress-warning {
		.value{
			color: #ff6868 !important;
		}
	}
}

/*右边数据*/
.main {
	flex: 1;
	width: 65rem;
	height: 100%;
	padding: 1rem;
	& > div {
		h2 {
			font-weight: normal;
			font-size: 1rem;
		}
	}
}
/*图表区*/
.chart-container {
	display: flex;
	height: 11rem;
	background-color: @bg-color;
	padding: 1rem;
	margin-bottom: 1rem;
	& > div {
		height: 100%;
		& + div {
			margin-left: .5rem;
		}
	}
	.keyboard-repair-total, .tray-total, .period {
		width: 8rem;
	}
	.language, .tray-remain, .keycap-remain {
		width: 11.5rem;
	}
	.chart {
		height: 8rem;
	}
	h2 {
		text-align: center;
		.u(1rem);
		font-size: .875rem;
	}
	/*键盘返修总数*/
	.keyboard-repair-total .chart {
		color: @theme-light-color;
		text-align: center;
		line-height: 8rem;
		font-size: 4rem;
	}
	/*tray盘总数*/
	.tray-total .chart {
		color: #ff8a00;
		text-align: center;
		line-height: 8rem;
		font-size: 4rem;
	}
}
/*键盘区*/
.keyboard-container {
	height: 25rem;
	background-color: @bg-color;
	padding: 0 1rem;
	margin-bottom: 1rem;
	.top {
		display: flex;
		height: 6.25rem;
		margin-bottom: .75rem;
	}
	.bottom {
		position: relative;
		padding-right: 15rem;
		overflow: hidden;
	}
	.keyboard-barcode {
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			height: 2rem;
			& > * + *{
				margin-left: 1rem;
			}
			select {
				height: 1.5rem;
				padding: 0 .25rem;
				border: 1px solid @theme-light-color;
				cursor: pointer;
				font-size: 13px;
				background-color: transparent;
			}
			.tabs {
				display: flex;
				a {
					.u(1.5rem);
					text-align: center;
					padding: 0 .5rem;
					color: @black87;
					transition: all .2s;
					cursor: pointer;
					white-space: nowrap;
					& + a {
						margin-left: -1px;
					}
					&.active, &:active {
						background-color: @theme-light-color;
						color: @white87;
					}
				}
			}
			.tabs-mode a{
				background-color: #fff;
			}
			.tabs-keyboard a{
				border: 1px solid @theme-light-color;
			}
		}
		.body {
			display: flex;
			align-items: center;
			width: 100%;
			height: 3.125rem;
			background-color: #b8f1cb;
			border: 1px solid @theme-light-color;
			button {
				line-height: 3rem;
				width: 6rem;
				background-color: @theme-light-color;
				color: @white87;
				cursor: pointer;
				text-align: center;
				border: none;
				display: none;
				font-size: 1rem;
				&:hover {
					filter: alpha(opacity=80);
					opacity: .8;
				}
				&:active {
					filter: alpha(opacity=100);
					opacity: 1;
				}
			}
			input[type="text"] {
				flex: 1;
				width: 9.875rem;
				margin: 0 .5rem;
				background-color: transparent;
				border: none;
				border-bottom: 2px solid @theme-light-color;
				font-size: 1rem;
				&::placeholder {
					color: @black54;
				}
				&.manual {
					display: none;
				}
			}
			&.no-style{
				border: none;
				background-color: transparent;
			}
		}
	}
	.lost-keycap-info {
		flex: 1;
		margin-left: 1rem;
		h2 {
			.u;
		}
		ul {
			width: 100%;
			overflow: hidden;
			overflow-x: auto;
			white-space:nowrap;
			li {
				display: inline-block;
				height: 50px;
				border: 1px solid @theme-light-color;
				& + li {
					margin-left: 1rem;
				}
				& > div {
					float: left;
					min-width: 6rem;
					height: 3rem;
					padding: 6px;
					text-align: center;
					& > * {
						display: block;
						font-size: .75rem;
						.u(1rem);
						&:first-child {
							margin-bottom: 4px;
						}
					}
					&:nth-child(1) {
						background-color: #e7ffea;
						& > span:first-child {
							display: inline-block;
							padding: 0 4px;
							background-color: @theme-light-color;
							color: @white87;
							.radius(2px);
						}
					}
					&:nth-child(2) > span:first-child {
						color: @theme-light-color;
						font-size: 1rem;
					}
					&:nth-child(3) > span:first-child {
						color: #ff8a00;
						font-size: 1rem;
					}
				}
			}
		}
	}
	.keyboard {
		transform: scale(0.75);
		transform-origin: left top;
	}
	.keyboard-info {
		position: absolute;
		top: 0;
		right: 0;
		width: 15rem;
		li {
			position: relative;
			padding-left: 2.5rem;
			.u;
			& + li {
				margin-top: 1.5rem;
			}
			span:last-child {
				margin-left: .25rem;
			}
			.icon {
				position: absolute;
				top: 0;
				left: 0;
				.q;
				font-size: 1.75rem;
				&.icon-flag {
					color: @theme-light-color;
				}
				&.icon-ruler {
					color: #00d800;
				}
				&.icon-config {
					color: #845cee;
				}
				&.icon-list {
					color: #fe8b02;
				}
				&.icon-color {
					color: #ff4858;
				}
			}
		}
	}
}
/*表格区*/
.table-container {
	display: flex;
	width: 100%;
	height: 14.75rem;
	& > div {
		flex: 1;
		position: relative;
		height: 100%;
		padding: 2rem 1rem 0 1rem;
		background-color: @bg-color;
		& + div {
			margin-left: 1rem;
		}
		& > h2 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			.u;
			padding: 0 1rem;
		}
	}
	/*键帽返修日志*/
	.repair-log {
		& > div {
			width: 100%;
			height: 12.062rem;
			overflow-y: auto;
		}
	}
	/*轴状态*/
	.axis-status {
		.table td {
			width: 25%;
		}
	}
}

/*dialog 弹窗*/
.mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-color: @black54;
	display: none;
}
.dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2000;
	display: none;
	background-color: #fff;
	footer {
		display: flex;
		.btn {
			flex: 1;
			.u(2.5rem);
			border: none;
			cursor: pointer;
			transition: all .2s;
			&.btn-cancel {
				background-color: #fff;
				border-bottom-left-radius: 4px;
				border-top: 1px solid #e0e0e0;
				&:active {
					background-color: #e0e0e0;
				}
			}
			&.btn-ok {
				background-color: @theme-light-color;
				border-bottom-right-radius: 4px;
				color: @white87;
				&:hover {
					background-color: lighten(@theme-light-color, 5%);
				}
				&:active {
					background-color: @theme-light-color;
				}
			}
		}
	}
}
/*tray信息弹窗*/
.dialog-tray-info {
	width: 974px;
	height: 512px;
	padding: 1rem;
	color: @black87;
	& > header {
		position: relative;
		height: 6rem;
		padding-right: 176px;
		margin-bottom: 1rem;
		.table td {
			width: 20%;
		}
		button {
			position: absolute;
			top: 2rem;
			right: 0;
			.u;
			width: 112px;
			text-align: center;
			background-color: @theme-light-color;
			color: @white87;
			border: none;
			cursor: pointer;
			&:hover {
				filter: alpha(opacity=80);
				opacity: .8;
			}
			&:active {
				filter: alpha(opacity=100);
				opacity: 1;
			}
		}
		.icon {
			position: absolute;
			top: -4rem;
			right: -4rem;
			width: 2rem;
			.q;
			font-size: 1.5rem;
			color: @white87;
			cursor: pointer;
			&:hover {
				color: #ff6868;
			}
		}
	}
}
/*确认弹窗*/
.dialog-confirm {
	width: 18rem;
	border-radius: 4px;
	header {
		height: 3rem;
		border-bottom: 1px solid #e0e0e0;
		h3 {
			.u(3rem);
			padding: 0 1rem;
			font-size: 1rem;
			font-weight: normal;
			border-bottom: 1px solid #e0e0e0;
		}
	}
	section {
		min-height: 5rem;
		padding: 2rem 1rem;
	}
}
/*配置弹窗*/
.dialog-config{
	width: 28rem;
	border-radius: 4px;
	header {
		height: 3rem;
		border-bottom: 1px solid #e0e0e0;
		h3 {
			.u(3rem);
			padding: 0 1rem;
			font-size: 1rem;
			font-weight: normal;
		}
	}
	section {
		padding: 2rem 1rem;
		& > * + * {
			margin-top: 1.5rem;
		}
	}
	.form-item {
		display: flex;
		align-items: center;
		label {
			width: 4.5rem;
		}
		input {
			flex: 1;
			border: 1px solid #ccc;
			transition: all .5s;
			&:focus {
				border: 1px solid @theme-light-color;
			}
		}
	}
	.save-path {
		display: flex;
		align-items: center;
		min-height: 2rem;
		span {
			width: 4.5rem;
		}
		p{
			flex: 1;
			line-height: 1rem;
			word-break: break-all;
		}
	}
}

/*操作提示*/
.toast{
	position: absolute;
	top: 4rem;
	left: 50%;
	transform: translateX(-50%);
	min-width: 5rem;
	padding: .5rem 1.5rem;
	box-shadow: 0 2px 4px 0 rgba(2, 63, 154, 0.37);
	background-color: @theme-light-color;
	color: @white87;
	border-radius: 4px;
	z-index: 99;
}
